<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xml的二级联动</title>
</head>
<body>
    <select id="province">
        <option>请选择</option>
        <option>山东省</option>
        <option>广东省</option>
        <option>辽宁省</option>
        <option>吉林省</option>
    </select>
    <select id="city">
        <option>请选择</option>
    </select>

    <script type="text/javascript">
        var Oprovince = document.getElementById('province');
        var Acity = document.getElementById('city');

        Oprovince.onchange= function(){
            var options = Acity.getElementsByTagName('option');
            for(var j = options.length-1;j>0;j--){
                Acity.removeChild(options[j]);
            }

            if(Oprovince.value!='请选择'){
                var xhr = getXhr();

                xhr.open("post","10.php");
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.send('pro='+Oprovince.value);

                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4 && xhr.status == 200){
                        var xmlDOC = xhr.responseXML;


                            var cities = xmlDOC.getElementsByTagName('city');
                            for(var i=0;i<cities.length;i++){
                                var city = cities[i].getAttribute('name');

                                var opts = document.createElement('option');
                                var txt = document.createTextNode(city);
                                opts.appendChild(txt);
                                Acity.appendChild(opts);
                            }
                    }
                }
            }

        }
        function getXhr(){
            var xhr = null;

            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }
    </script>
</body>
</html>
